<template>
	<div class="card-item card-bg-blue" >
		<div class="item-head">
			<h3 class="card-title">钻石保养卡</h3>
			<em class="card-explain">仅限上海门店使用</em>
		</div>
		<div class="item-content">
			<p class="card-info">
				商品展示的划横线价格为参考价，（如厂商指导价、建议零售价等）或该商品在京东平台上曾经展示过的销售价；商品吊牌价等可能会致
			</p>
		</div>
		<div class="item-buy">
			<p class="price"><span class="currency">&yen;</span>298</p>
			<a href="javascipt:;" class="buy-btn">立即购买</a>
		</div>
	</div>
</template>


<style lang="scss" scoped>

@import '../../assets/css/_functions.scss';
@import '../../assets/css/_variables.scss';
	.card-item{
		height:rem(180);
		border-radius: 5px;
		padding:rem(15) rem(15) 0 rem(15);
		position:relative;
		overflow: hidden;
		margin:0 auto;
		color:#fff;
		.item-head{
			height: rem(30);
			border-bottom:1px solid #fff;
			overflow: hidden;
			.card-title{
				font-size:rem(18);
				float:left;
			}
			.card-explain{
				padding-top: rem(5);
				font-size:rem(13);
				float:right;
			}
		}
		.item-content{
			padding:rem(12) 0;
			.card-info{
				line-height: rem(20);
				font-size:rem(11);
			}
		}
		.item-buy{
			border-top:1px dashed #fff;
			overflow: hidden;
			padding:rem(15) 0;
			.price{
				float:left;
				font-size:rem(22);
			}
			.currency{
				font-size:rem(13);
			}
			.buy-btn{
				float: right;
				width:rem(67);
				height:rem(25);
				line-height: rem(25);
				font-size:rem(12);
				text-align: center;
				border-radius:5px;
				background-color:#fff;
			}
		}
	}
	.card-item:after, .card-item:before{
		content:'';
		width:rem(10);
		height: rem(10);
		display:block;
		border-radius:10px;
		background-color: #eee;
		position:absolute;
	}
	.card-item:after{
		left:rem(-5);
		bottom:rem(47);
	}
	.card-item:before{
		right:rem(-5);
		bottom:rem(47);
	}
	.card-bg-blue{
		background:#22b2ed;
	}
</style>